<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>调音器</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <select name="" id="menu" onchange="onItemSelected()"></select>
    <canvas class="frequency-bars"></canvas>
    <div class="meter">
        <div class="meter-dot"></div>
        <div class="meter-pointer"></div>
    </div>
    <div class="notes">
        <div class="notes-list"></div>
        <div class="frequency">
            <span>当前值:</span>
            <div class="current-frequency"></div> <span>Hz</span>
        </div>
        <div class="frequency">
            <span>标准值:</span>
            <div class="standard-frequency"></div> <span>Hz</span>
        </div>
    </div>
    <!-- <script src="https://cdn.bootcss.com/sweetalert/2.1.0/sweetalert.min.js"></script> -->
    <script src="lib/aubio.js"></script>
    <script src="lib/app.js"></script>

    <script>

        function genPianoNotes() {
            const piano_notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']
            const middleA = 440
            const middleAIndex = 57 // A4 12*4 + 9
            const notes = []
            const step = Math.pow(2, 1 / 12)
            for (let i = 1; i < 9; i++) {
                for (let j = 0; j < piano_notes.length; j++) {
                    var item = piano_notes[j];
                    var index = i * 12 + j
                    var frequency = middleA * Math.pow(step, index - middleAIndex)
                    notes.push({
                        name: item[0],
                        upper: item[1] || '',
                        lower: i,
                        frequency: frequency,
                        cents: 0,
                        value: index
                    })
                }
            }
            return notes
        }

        function genNotes(array) {
            return array.map((item, index) => {
                return {
                    name: item[0],
                    upper: item[1],
                    lower: item[2],
                    frequency: item[3],
                    cents: 0,
                    value: index
                }
            })
        }

        const guqin_nomal = [
            ['C ', '', '一', 65.41],
            ['D ', '', '二', 73.42],
            ['F ', '', '三', 87.31],
            ['G ', '', '四', 98],
            ['A ', '', '五', 110],
            ['C', '', '六', 130.81],
            ['D', '', '七', 146.83]
        ]

        const guqin_nomal_notes = genNotes(guqin_nomal)

        const guqin_slow3_notes = JSON.parse(JSON.stringify(guqin_nomal_notes))
        guqin_slow3_notes[2].frequency = 82.41
        guqin_slow3_notes[2].name = 'E'

        const guqin_slow36_notes = JSON.parse(JSON.stringify(guqin_nomal_notes))
        guqin_slow36_notes[2].frequency = 82.41
        guqin_slow36_notes[2].name = 'E'
        guqin_slow36_notes[5].frequency = 123.47
        guqin_slow36_notes[5].name = 'B'

        const guqin_tight5_notes = JSON.parse(JSON.stringify(guqin_nomal_notes))
        guqin_tight5_notes[4].frequency = 116.54
        guqin_tight5_notes[4].upper = 'b'
        guqin_tight5_notes[4].name = 'B'


        const guitar_nomal = [
            ['E ', '', '六', 82.41],
            ['A ', '', '五', 110],
            ['D ', '', '四', 146.83],
            ['G ', '', '三', 196],
            ['B ', '', '二', 246.94],
            ['E ', '', '一', 329.63],
        ]

        const violin_nomal = [
            ['G ', '', '四', 196],
            ['D ', '', '三', 293.66],
            ['A ', '', '二', 440],
            ['E ', '', '一', 659.26],
        ]

        const app = new Application()

        const items = [
            {
                name: 'piano',
                title: '钢琴 A4=440hz',
                allowPlay: true,
                notes: genPianoNotes()
            }, {
                name: 'guqin',
                title: '古琴-正调 1=F',
                allowPlay: false,
                notes: guqin_nomal_notes
            }, {
                name: 'guqin_tight5',
                title: '古琴-紧五弦 1=bB',
                allowPlay: false,
                notes: guqin_tight5_notes
            }, {
                name: 'guqin_loose3',
                title: '古琴-慢三弦 1=C',
                allowPlay: false,
                notes: guqin_slow3_notes
            }, {
                name: 'guqin_loose36',
                title: '古琴-慢三六弦 1=G',
                allowPlay: false,
                notes: guqin_slow36_notes
            },

            {
                name: 'guitar_nomal',
                title: '吉他-标准',
                allowPlay: false,
                notes: genNotes(guitar_nomal)
            },
            {
                name: 'violin_nomal',
                title: '小提琴-标准',
                allowPlay: false,
                notes: genNotes(violin_nomal)
            },

        ]

        function onItemSelected() {
            const item = document.querySelector('#menu')
            console.log(item.value)
            const selection = items[item.value]
            window.location.hash = '#' + item.value
            app.notes.allowPlay = selection.allowPlay
            app.notes.setNotes(selection.notes)
            app.start()
        }

        var selection = 0
        const menu = document.querySelector('#menu')
        if (window.location.hash.length > 1) {
            try {
                selection = parseInt(window.location.hash.substr(1))
            } catch (error) {
            }
        }
        console.log(window.location.hash, selection)

        for (let index = 0; index < items.length; index++) {
            const item = items[index];
            const ele = document.createElement('option')
            if (index == selection) {
                ele.selected = true
            }
            ele.value = index
            ele.textContent = item.title
            // ele.onclick = onItemSelected
            menu.appendChild(ele)
        }

        onItemSelected()

    </script>

</body>

</html>